<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML5高级 表单新特性</title>
    <style>
        *{
            box-sizing: border-box;
        }
        body{
            text-align: center
        }
        .container{
            max-width: 1140px;
            margin-left: auto;
            margin-right:auto;
        }
        .col-7{
            flex: 0 0 58%;
            max-width: 58%;
        
        }
        .col-5{
            flex: 0 0 41%;
            max-width: 41%;
        }
        .form-group{
            margin-bottom: 1rem;
        }
        .row{
            display: flex;
            flex-wrap:wrap;
        }
        input{
            outline: none;
            padding: 3px 5px;
        }
    </style>
</head>
<body>
    <!-- 新的input type-->
    <h3>新的input type</h3>
    <form class="container">
        <div class="form-group row">
                <label for="email" class="col-5">您的邮箱:</label><input type="email" class="col-7" name="email" id="email"/>
        </div>
         <div class="form-group row"><label for="url">您的博客</label>:<input type="url" name="url" id="url"/></div>
         <div class="form-group row"><label for="search">搜索:</label><input type="search" name="search" id="search"/></div>
         <div class="form-group row"><label for="tel">您的电话</label>:<input type="tel" name="tel" id="tel"/></div>
         <div class="form-group row"><label for="color">您的颜色</label>:<input type="color" name="color" id="color"/></div>
         <div class="form-group row"><label for="range">范围:</label><input type="range" name="range"  id="range"/></div>
         <div class="form-group row"><label for="date">日期:</label><input type="date" name="date" id="date"/></div>
         <div class="form-group row"><label for="number">成绩:</label><input type="number" id="number" /></div>
         <div class="form-group row"><label for="month">月份:</label><input type="month" name="month" id="month"/></div>
         <div class="form-group row"><label for="week">周:</label><input type="week" name="week" id="week"/></div>
         <button>提交</button>
    </form> 
    <!-- 新的表单元素-->
    <h3>新的表单元素</h3>
    <form >
         <datalist id="l">
             <option >鱼香肉丝</option>
             <option></option>
             <option></option>
             <option></option>
         </datalist>
         中午午餐：<input name="lunch" autocomplete="off" list="l"/><br/>
         下载进度：<progress id="p1" value="0.0"></progress><br/>
         机油量：<meter min="0" max="100" low="40" high="60" optimum="50" value="0" id="m1"></meter>
         每月工资：<meter min="0" max="100000" low="20000" high="60000" optimum="80000" value="0" id="m2"></meter>
         单价：￥ 100.00 数量：<input type="number" min="1" max="99" value="2">小计：￥<output>100</output><br/>
        <button>提交</button>

   </form> 
   <!-- 新的表单属性-->
   <form>
       <input placeholder="请输入你的用户名" type="text" multiple name="username" autofocus autocomplete="off" /><br/>
       <input placeholder="请输入你的邮箱" type="email" multiple name="email"/><br/>
       <input type="file" multiple name="file"/><br/>
       <button>提交</button>
   </form>
   <form id="loginform" action="5.php"></form>
   <input type="text" placeholder="请输入用户名" form="loginform"><br>
   <input type="password" placeholder="请输入用户名" form="loginform"><br>
   <button form="loginform" id="button">提交</button>
   <!-- 新的表单验证属性-->
   <form onsubmit="onsubmit">
       <input type="text" placeholder="请输入用户名" required><br>
       <input type="password" placeholder="请输入" minlength="6"><br>
       <input type="number" placeholder="请输入" min="6"><br>
       <input type="number" placeholder="请输入" max="60"><br>
       <input type="number" placeholder="请输入" step="5"><br>
       <input type="week" placeholder="请输入" value=""  id="phone" onblur="onBlur(this)"><br>
       <button>提交</button>
   </form>
    <script>
        function onBlur(elem){
            console.log(elem.validity)
        }
        function onsubmit(e){
           e.preventDefault();
           console.log(phone.validity)
        }
        var ptimer  = setInterval(function(){
            var value = p1.value;
            value+=.01;
            p1.value =value;
            if(value>100){
                clearInterval(ptimer)
            }
        },100)
        var mtimer  = setInterval(function(){
            var value = m1.value;
            value+=1;
            m1.value =value;
            if(value>100){
                clearInterval(mtimer)
            }
        },100)
        var m2timer  = setInterval(function(){
            var value = m2.value;
            value+=1000;
            m2.value =value;
            if(value>100000){
                clearInterval(m2timer)
            }
        },100)
        console.dir(phone.validity)
    </script>
</body>
</html>